<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <div class="w-96">
        <div onclick="getData()" class="mx-auto w-24 p-2 text-white text-center bg-sky-500 rounded-md cursor-pointer hover:bg-sky-300">获取接口</div>
        <div id="textArea">

        </div>
    </div>
    <div hx-get="http://180.163.74.199:81/zk/user/getNewPublicKey?loginType=1" hx-trigger="every 10s"></div>
    <div id='container' class="bg-white py-24 flex w-full min-h-full" ></div>

    

    
    <script src="https://unpkg.com/konva@9/konva.min.js"></script>
    <script src="https://unpkg.com/htmx.org@2.0.3" integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq" crossorigin="anonymous"></script>
    <script>
        // 在这里编写你的 Konva 代码
        const stage = new Konva.Stage({
            container: 'container',
            width: 800,
            height: 600
        });
 
        const layer = new Konva.Layer();
        stage.add(layer);
 
        const rect = new Konva.Rect({
            x: 50,
            y: 50,
            width: 70,
            height: 50,
            fill: 'red',
            name: 'first rect'
        });
        layer.add(rect);
        layer.draw();

        function getData(){
            var xhttp = new XMLHttpRequest();
            xhttp.open("GET", "https://mock.apifox.cn/m1/3038469-0-default/emp/list", true)
            xhttp.onreadystatechange = function(){
                if(this.readyState == 4 && this.status == 200){
                    console.log(this.responseText)
                    document.getElementById("textArea").innerHTML = this.responseText;
                }
            };
            xhttp.send();
        }
    </script>
</body>
</html>